<template>
  <div class="container">
    <div class="nav-bar flex items-center">
      <img
        class="w-[60px] h-[40px]"
        src="@/assets/images/zr-logo-title.png"
        alt="zr-logo"
      />
      <span class="text-xl font-semibold">药管家管理端</span>
    </div>
    <div class="content flex flex-col">
      <h2 class="text-xl"> 重置密码 </h2>

      <div class="w-[40%] flex-1 self-center flex flex-col">
        <a-steps class="mt-[50px]" :current="step">
          <a-step>验证账号</a-step>
          <a-step>重设密码</a-step>
          <a-step>重设完成</a-step>
        </a-steps>

        <div class="mt-[130px] h-[100px]">
          <div v-if="step === 1">
            <a-input placeholder="输入手机号" size="large">
              <template #suffix>
                <span>获取验证码</span>
              </template>
            </a-input>
            <a-verification-code class="mt-[30px]" />
          </div>

          <div v-if="step === 2">
            <a-input-password placeholder="请输入密码" allow-clear />
            <a-input-password
              class="mt-[30px]"
              placeholder="再次输入密码"
              allow-clear
            />
          </div>

          <div v-if="step === 3">
            <a-empty>
              <template #image>
                <SuccessImg class="w-[100px] h-[100px] mx-auto" />
              </template>
              密码重置成功！
            </a-empty>
          </div>
        </div>

        <a-button
          type="primary"
          size="large"
          class="mt-[50px]"
          @click="nextStep"
          >下一步</a-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import SuccessImg from '@/assets/svg/success.svg?component';

  const step = ref(1);

  const nextStep = () => {
    step.value += 1;
  };
</script>

<style lang="less" scoped>
  .container {
    position: relative;
    display: flex;
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #e8f3ff;

    .nav-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background-color: #ffffff;
    }

    .content {
      aspect-ratio: 16 / 9;
      width: 75%;
      background-color: #ffffff;
      padding: 30px;
    }
  }
</style>
